<!DOCTYPE html>
<html>
<head>
    <title>JS图片左右切换效果</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }

        .images-scroll{
            border:1px solid #CCC;
            margin:100px auto;
            width:300px;
            height:200px;
            position:relative;
        }

        .images-scroll ul{
            list-style:none;
        }

        .images-scroll li{
            float:left;
            display:none;
        }

        .images-scroll .active{
            display:block;
        }

        .images-scroll a{

        }

        .images-scroll img{
            width:300px;
            height:200px;
            border:none;
        }

        .images-scroll .left-scroll{
            position:absolute;
            top:40%;
            left:-40px;
            opacity:0;
            background:url("../../images/1.png");
            background-repeat:no-repeat;
            background-position:0px 0px;
            height:27px;
            width:27px;
            cursor:pointer;
        }

        .images-scroll .right-scroll{
            position:absolute;
            top:40%;
            opacity:0;
            right:-40px;
            background:url("../../images/2.png");
            background-repeat:no-repeat;
            background-position:-30px 0px;
            height:27px;
            cursor:pointer;
            width:27px;
        }

        .images-scroll .right-scroll:hover{
            background-color:transparent;
        }

    </style>
    <script src="../../lib/jquery-1.11.0.min.js"></script>
</head>
<body>

<div id="images-scroll" class="images-scroll">
    <ul>
        <li class="active"><a href=""><img src="../../images/background.jpg" alt=""></a></li>
        <li><a href=""><img src="../../images/banner01.png" alt=""></a></li>
        <li><a href=""><img src="../../images/activity01.jpg" alt=""></a></li>
        <li><a href=""><img src="../../images/activity02.jpg" alt=""></a></li>
    </ul>
    <span id="left-scroll" class="left-scroll"></span>
    <span id="right-scroll" class="right-scroll"></span>
</div>
<script type="text/javascript">

    $("#images-scroll").mouseover(function(){
        $("#left-scroll").animate({left: '10px',opacity:'1',},400);
        $("#right-scroll").animate({right: '10px',opacity:'1',},400);
    })
    $("#images-scroll").mouseleave(function(){
        $("#left-scroll").animate({left: '-40px',opacity:'0',},400);
        $("#right-scroll").animate({right: '-40px',opacity:'0',},400);
    })

    imgScroll=setInterval("runScroll()",3000);
    var last_idx=$("#images-scroll ul li").index($("#images-scroll ul li:last"));
    function runScroll(){
        var idx=$("#images-scroll ul li").index($("#images-scroll ul .active")[0]);
        $("#images-scroll li").eq(idx).removeClass("active").hide();
        idx+=1;
        if(idx%(last_idx+1)==0){
            idx=0;
        }
        $("#images-scroll li").eq(idx).addClass("active").show();
    }
    $("#left-scroll").click(function(){
        var idx=$("#images-scroll ul li").index($("#images-scroll ul .active")[0]);
        $("#images-scroll li").eq(idx).removeClass("active").hide();
        idx-=1;
        if(idx==-1){
            idx=last_idx;
        }
        $("#images-scroll li").eq(idx).addClass("active").show();
    })
    $("#right-scroll").click(function(){
        runScroll();
    })
</script>

</body>
</html>
